<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>供应商列表</title>

    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
          rel="stylesheet">
    <!-- Morris -->
    <link href="../../resource/hotui/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/hotui/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>
    <link href="../../resource/hotui/js/plugins/datetimepick/css/daterangepicker.css"
          th:href="@{/resource/hotui/js/plugins/datetimepick/css/daterangepicker.css}" rel="stylesheet"/>

    <style type="text/css">
        .hr-line-dashed {
            margin: 10px 0;
            height: 1px;
            border-top: 1px dashed #e7eaec;
            background-color: #fff;
            color: #fff;
        }
    </style>
</head>

<body>
<div class="wrapper wrapper-content tooltip-demo">
    <!--list-->
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins m-b-none">
                <div class="ibox-content p-xxs no-top-border">

                    <div class="panel-body table-responsive">
                        <button type="button" onclick="listHandler.editShow(0,'',0,0,0)" style="float: right;"
                                class="btn btn-primary btn-sm">新增
                        </button>
                        <table class="table table-bordered table-hover table-center">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>近区域</th>
                                <th>次近区域</th>
                                <th>远区域</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            <tr th:each="item:${list}">
                                <td th:text="${item.name}">果园</td>
                                <td th:text="${item.closestName}">近</td>
                                <td th:text="${item.middleName}">次近</td>
                                <td th:text="${item.farawayName}">远</td>
                                <td>
                                    <a th:href="|javascript:listHandler.editShow(${item.id},'${item.name}',${item.closestId},${item.middleId},${item.farawayId})|"
                                       href="javascript:listHandler.editShow()">编辑</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="edit_modal">
    <div class="ibox float-e-margins" style="width: 500px;">
        <div class="ibox-content" style="border-top: none;">
            <div class="panel-body form-horizontal">
                <input type="hidden" id="edit_id"/>
                <div class="form-group ">
                    <label class="col-sm-3 control-label">区域名称:</label>

                    <div class="col-sm-9">
                        <input id="edit_name" name="edit_name" type="text"
                               class="form-control input-sm"
                               placeholder="区域名称"/>
                    </div>
                </div>
                <div class="hr-line-dashed "></div>
                <div class="form-group form-inline">
                    <label class="col-sm-3 control-label">近区域:</label>

                    <div class="col-sm-9">
                        <select class="form-control input-sm mb10" id="edit_closest">
                            <option value="0">请选择</option>
                            <option th:each="item:${list}" th:value="${item.id}" th:text="${item.name}"></option>
                        </select>
                    </div>
                </div>
                <div class="hr-line-dashed "></div>
                <div class="form-group form-inline">
                    <label class="col-sm-3 control-label">次近区域:</label>

                    <div class="col-sm-9">
                        <select class="form-control input-sm mb10" id="edit_middle">
                            <option value="0">请选择</option>
                            <option th:each="item:${list}" th:value="${item.id}" th:text="${item.name}"></option>
                        </select>
                    </div>
                </div>
                <div class="hr-line-dashed "></div>
                <div class="form-group form-inline" id="edit_faraway">
                    <label class="col-sm-3 control-label">远区域:</label>

                    <div class="col-sm-9">
                        <select class="form-control input-sm mb10">
                            <option value="0">请选择</option>
                            <option th:each="item:${list}" th:value="${item.id}" th:text="${item.name}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<!--基础框架js-->
<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js(123123)}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js}"></script>
<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>
<script src="../../resource/lib/moment.min.js" th:src="@{/resource/lib/moment.min.js}"></script>
<script src="../../resource/hotui/js/plugins/datetimepick/js/daterangepicker.js"
        th:src="@{/resource/hotui/js/plugins/datetimepick/js/daterangepicker.js}"></script>


<script type="text/javascript" th:inline="javascript">
    const apiUri = /*[[@{/locator/area}]]*/  "";
</script>
<script>
    var editModal = $("#edit_modal").modal("编辑", function () {
        listHandler.save();
    });

    $(function () {

    });

    var listHandler = {
        editShow: function (id, name, closest, middle, faraway) {
            editModal.show(function () {
                $("#edit_id").val(id);
                $("#edit_name").val(name);
                $("#edit_closest").val(closest);
                $("#edit_middle").val(middle);
                $("#edit_faraway").val(faraway);
            });
        },
        save: function () {
            let id = $("#edit_id").val();
            let name = $.trim($("#edit_name").val());
            let closest = $("#edit_closest").val();
            let middle = $("#edit_middle").val();
            let faraway = $("#edit_faraway").val();

            if (name.length === 0) {
                hot.tip.msg("请输入区域名称");
                return;
            }

            let requestData = {
                id: id,
                name: name,
                closest: closest,
                middle: middle,
                faraway: faraway
            };

            hot.ajax(apiUri + "/save", requestData, function (apiResult) {
                if (apiResult.resultCode === 2000) {
                    hot.tip.success("保存成功", function () {
                        window.location.reload();
                    })
                }
            }, function () {
            }, "post", 300);
        }
    }
</script>
</body>
</html>
